<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			body {
				height: 3000px;
			}
		</style>
	</head>
	<body>
		<script>
			// 1. 相对于窗口的坐标: clientX/clientY 基于窗口（类似于 position:fixed 只相对于窗口）。
			document.addEventListener('click', function (e) {
				console.log('基于窗口坐标：', e.clientX, e.clientY)
			})

			// 2. 相对于文档的坐标: pageX/pageY 基于文档（包含文档滚动出去的部分）。
			document.addEventListener('click', function (e) {
				console.log('基于文档坐标（在元素内的）：', e.pageX, e.pageY)
			})

			// 3. window.pageXOffset 文档的垂直滚动出的部分的高度 /window.pageYOffset 文档的水平滚动出的部分的宽度。
			document.addEventListener('click', function (e) {
				console.log('文档滚出部分的宽/高度：', window.pageXOffset, window.pageYOffset)
			})
		</script>
	</body>
</html>
